项代理（ItemDelegate）

ItemDelegate类用于编辑 ListWidget、TableWidget 和 TreeWidget等控件的项Item的文本内容。 您可以通过调用 edit() 来编辑某一个项的内容。该类允许基于 validator 属性定义的规则约束文本输入。

事件

当编辑器控件完成数据编辑时，会触发数据更改事件 itemDataChanged。

// 监听数据更改事件
itemDelegate.bind('itemDataChanged', (event: ItemDataChangeEvent): void => {
    event.item as ViewItem; // 被编辑的项目。
    event.data; // 编辑后的数据。
});

示例代码

以下代码展示了如何创建一个 ItemDelegate：

const desktop = Desktop.instance();
const listWidget = new ListWidget(desktop);
const osNames = ['Windows 10', 'Windows Server 2016', 'Mac OS', 'IOS', 'Ubuntu', 'Debian', 'Android', 'RedHat'];
osNames.forEach((name: string): void => {
    listWidget.addItem(name);
});

const itemDelegate = new ItemDelegate;
listWidget.bind('itemClicked', (event: ItemClickEvent): void => {
    itemDelegate.edit(event.item as ViewItem);
});

自定义代理

如果需要编辑某一项时弹出一个下拉框（如 ComboBox），可以通过继承 AbstractItemDelegate 并重写受保护函数 createEditor() 和 setItemData() 来实现。

const osNames = ['Windows 10', 'Windows Server 2016', 'Mac OS', 'IOS', 'Ubuntu', 'Debian', 'Android', 'RedHat'];

class ComboItemDelegate extends AbstractItemDelegate {

    constructor() {
        super();
        this.m_editOnClose = false;
    }

    protected createEditor(item: ViewItem): Widget {
        const editor = new ComboBox(item);
        osNames.forEach((name: string) => {
            editor.add(name);
        });

        editor.text = item.text;
        editor.bind('indexChanged', (event: IndexChangeEvent) => {
            this.setItemData(editor, item);
        });
        return editor;
    }

    protected setItemData(editor: Widget, item: ViewItem): void {
        const comboBox = editor as ComboBox;
        if (item.text !== comboBox.text) {
            item.text = comboBox.text;
            this.emit('itemDataChanged', { item, data: comboBox.text });
        }
    }
}

...
const itemDelegate = new ComboItemDelegate;
...